Contextmenu (Library)

Contextmenu

Creates a shortcut menu with entries defined using menu items.

Syntax

HTML	<div cordysType ="wcp.library.ui.ContextMenu id="contextmenuID" > <div id="item1">Menu Item 1</div> <div separator="true"> </div> ... </div>

where contextmenuID is the string that specifies the unique ID for the shortcut menu. This identifier must be unique within the page.
After shortcut menus are defined, menu items can be defined inside them using the following syntax:

HTML	<div id="mID" onclick="fClick" separator="sSeperator" enabled="sEnable" image="url" submenu="subID">content </div>

where mID denotes the unique ID of the menu item inside the shortcut menu, and content denotes the actual content of the menu item that is displayed.
After a shortcut menu is defined, it can be attached to any element by assigning the name of the shortcut menu to the contextmenu attribute as follows:

HTML	<element contextmenu=contextMenuID>...</element>

where element can be any valid HTML element.
To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.
The properties, methods, and events defined for this component are as follows:

Table 1. List of Attributes

Attribute	Property	Description
activeElement	activeElement	Object that denotes the HTML element for which the shortcut menu is attached
appearance	appearance	String, optional. Determines the position in which the context menu is displayed. The available options are: dropdown: The context menu is displayed as a drop-down list with respect to the parent. standard: Default. The context menu is displayed at the coordinates where you right-clicked.
automaticLoad	automaticLoad	Boolean that denotes the context menu is automatically loaded when the page is loaded true: Default. The context menu is loaded. false: The context menu is not loaded when the page is loaded.
description		The attribute is applicable to sticky context menus that can be dragged across an application and display a description and a close icon in the titlebar. If no value is specified, the value of the ID attribute of the menu is used instead. In case of a sub-menu of a context menu, the description is taken from the menu item, which opens it.
stickable	stickable	Boolean that denotes whether a menu can be made sticky. A sticky menu can be dragged to re-position it on a page and is not hidden when it loses focus. The d efault value is false so that the menu is automatically hidden when it loses focus.
sticky	sticky	Boolean that denotes whether a menu will remain visible even when it loses focus. The default value is false. A menu can be made sticky only if `stickable` is set to true. A sticky menu is useful in cases where multiple menu items are required to be selected.

Table 2. List of Methods

Method	Description
addItem(sID, fpMethod, sContent, bEnable, sInsertBeforeId)	Adds a new menu item to the context menu and returns the created item
addSeparator(sID, sInsertBeforeId)	Adds a separator to the context menu and returns the object that is created sID: Optional. String that specifies the unique identifier of the menu item created. sInsertBeforeId: Optional. The object or ID of the object above which, the separator needs to be inserted. When not defined, the separator is added as the last menu item.
hideItem(sID)	Hides a menu item or a separator in the context menu sID: Required. Refers to the ID of the menu item or separator to be hidden.
registerHTML(oHTMLElement)	Registers an HTML element to the shortcut menu so that the shortcut menu is attached to that element. It takes a parameter `oHTMLElement` that specifies the HTML element to which, the shortcut menu is to be attached.
removeAll()	Removes all menu items and separators from the context menu
removeItem(sID)	Removes a menu item or separator from the context menu sID: Required. Refers to the ID of the menu item or separator to be removed.
show	Shows a shortcut menu for the event fired
showItem(sID)	Displays a hidden menu item or separator in the context menu sID: Required. Refers to the ID of the menu item or separator to be displayed.
unregisterHTML(oHTMLElement)	Removes the context menu attached to an HTML element. It takes a parameter `oHTMLElement` that specifies the HTML element from which, the shortcut menu is to be detached.
updateContent( id, content )	Updates the menu item content id: ID or object of the menu item content: Description or HTML-string of the menu item

Table 3. List of Events

Event	Description
oncontext	Fired on right-clicking the element to which the shortcut menu is attached

Once the shortcut menus are defined, menu items can be added to it (statically and dynamically). The menu items created can also have images to represent them. Multi-level shortcut menus are also supported on the menu items. Following are the properties, method and events applied on the menu items.

Table 4. List of Attributes (applicable to menu items)

Attribute/Property	Description
checkable	Optional. Boolean that denotes whether the menu item can be checked. As with items with radio buttons, you can use the `radioname` attribute with `checkable` menu items (for which, checkable=true) to group them in a radio group. You can check only one item in a group but instead of a radio button, the selected item displays a checkmark.
checked	Optional. Boolean that denotes whether the menu item is selected. Used in combination with `checkable` or `radioname`.
enabled	Boolean that denotes whether the menu item is enabled or disabled
hidden	Optional. Boolean that denotes whether the item is displayed or hidden. If set as true, the item is hidden.
image	String that specifies the URL of the image to be shown for the menu item
separator	String that denotes whether the menu item is used as a separator
shortcut	Optional. String that denotes the description of a menu item. This description is shown at the right hand side of the menu item. A `shortcut` has no meaning in the context menu, but is relevant in your application; for example, keyboard shortcuts like Ctrl+S.
submenu	String that specifies the unique ID of a shortcut menu, which can be used as a sub-menu for the menu item.
radioname	String, optional. The menu item is shown with a radio button. All items with the same `radioname` are combined in a radio group. You can select only one button in a radio group.

Table 5. List of Events (applicable to menu items)

Event		Description
onclick		DEPRECATED. To ensure multi-browser support, use `onmenuitemclick` instead. Fires when a menu item is clicked.
onmenuitemclick		Fires when a menu item is clicked This event is supported across multiple modern browsers. Refer to Event Model Changes for Multi-browser Support for more information.

Note: When the shortcut menu is loaded in the HTML page and if the content of the context menu is inside the body of the HTML, then the menu item texts will be displayed at the top of the page while loading the page. To avoid this, it is advised to set the display attribute of the style property to none. The shortcut menu will automatically set it to visible after the onafterload event is fired.

Example

The following sample code shows the implementation and use of the contextmenu behavior:

 <\!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
 <html> 
 <head> 
 <title>Demo of contextmenu</title> 
 <script type="text/javascript" src="/cordys/wcp/application.js"></script> 
 <script type="text/javascript"> 
 function showContext() 
 { 
 application.setStatus("Saving the document..."); 
 }
function checker()
 { 
 var eventObject = window.application.event; 
 window.status = cordys.getTextContent(eventObject.menuitem); 
 }
</script>
 </head> 
 <body class="light" bottommargin=20 leftmargin=20 rightmargin=20 topmargin=20> 
 <h3>Demo of contextmenu</h3> 
 <div contextmenu="contextdemo">Right Click to show contextmenu</div> 
 <div cordysType="wcp.library.ui.ContextMenu" id="contextdemo" style="display:none"> 
 <div onclick="application.notify('Hello')" submenu="newMenu">New</div> 
 <div separator="true"> </div> 
 <div image="/cordys/wcp/theme/default/icon/action/save.png"" onclick="showContext()" shortcut="Ctrl+S">2.Save</div> 
 <div separator="true"> </div> 
 <div radioname="group1" onclick="checker()">Radio Item1</div> 
 <div radioname="group1" onclick="checker()" checked="true">Radio Item2</div> 
 <div separator="true"> </div> 
 <div submenu="myContext">Stickable menu</div> 
 </div> 
 <div cordysType="wcp.library.ui.ContextMenu" id="newMenu" style="display:none"> 
 <div image="/cordys/wcp/theme/default/icon/document/businessprocess.png" onclick="application.notify('New Business Process.')">Process</div> 
 <div image="/cordys/wcp/theme/default/icon/document/rule.png" enabled="false" onclick="application.notify('New Rule.')">Rule</div> 
 <div image="/cordys/wcp/theme/default/icon/document/form.png" onclick="application.notify('New Form.')">Form</div> 
 </div> 
 <div cordysType="wcp.library.ui.ContextMenu" id="myContext" style="display:none" stickable="true"> 
 <div checkable="true" checked="true" onclick="checker()">Checker</div> 
 <div enabled="false">Disabled menu item</div> 
 <div separator="true"> </div> 
 <div onclick="application.notify('Hello.')">Say Hello</div> 
 </div> 
 </body> 
 </html>

pp108 : Contextmenu (Library)